<template>
  <div class="homepage-container">
    <!-- header -->
    <!-- <mt-header fixed class="mt-header">
      <div slot="left">
        家政平台
      </div>
    </mt-header> -->
    <div class="l">
      <div class="h-l">
      </div>
      <van-search class="vsearch"
                  v-model="value"
                  shape="round"
                  placeholder="请输入搜索关键词" />
      <span @click="$router.push('/DomesticRecord')"> <i class="jiazheng icon-lingdangcopy"></i>
      </span>
    </div>
    <div class="t">
      <!-- swiper -->
      <!-- <mt-swipe :auto="4000" class="pageSwipe">
      <mt-swipe-item v-for="(item, index) in img" :key="index" class="swipe-item">
        <img :src="item.icon" alt="" class="swiperImg">
      </mt-swipe-item>
    </mt-swipe> -->
      <van-swipe class="pageSwipe"
                 :autoplay="3000"
                 indicator-color="white">
        <van-swipe-item v-for="(item, index) in img"
                        :key="index"
                        class="swipe-item">
          <img :src="item.icon"
               alt=""
               class="swiperImg">
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="h">
      <!-- islife -->
      <div class="islife">
        <span @click="$router.push('/settingbusiness')">入驻商务部</span>
        <span @click="$router.push('/job')">家政求职</span>
        <span @click="$router.push('/housekeeping')">找家庭服务</span>
      </div>
      <div class="h">
        <!-- <mt-tabbar class="islife" v-model="islife">
      <mt-tab-item id="homepage">
        首页
      </mt-tab-item>
      <mt-tab-item id="Housekeeping-details">
        家服公司
      </mt-tab-item>
      <mt-tab-item id="service">
        家服人员
      </mt-tab-item>
      <mt-tab-item id="my">
        我的
      </mt-tab-item>
    </mt-tabbar> -->

        <!-- find-need -->
        <div class="find-need">
          <div class="find-need-item"
               v-for="item in serviceStyle"
               :key="item.id">
            <img :src="item.icon"
                 class="round" />
            <span>{{item.occ}}</span>
          </div>
        </div>
      </div>
      <div class="pp">
        <!-- company -->
        <div class="iscompany">
          <div class="iscompany-head"
               @click="$router.push('/homehelp')">
            <i class="jiazheng icon-shouye fuck" />
            <span>湖南征信认证家服公司</span>
          </div>
          <div class="iscompany-main">
            <div class="iscompany-main-item"
                 v-for="item in company"
                 :key="item.id">
              <div class="x">
                <div class="iscompany-main-item-l">
                  <img :src="item.img.icon"
                       alt="">
                </div>
                <div class="iscompany-main-item-r">
                  <h3>{{item.company}}</h3>
                  <p>{{item.slogan}}</p>
                  <div class="label">
                    <van-tag round
                             plain
                             color="#1196db"
                             v-for="(val, index) in item.label"
                             :key="index">{{val}}</van-tag>
                    <!-- <span v-for="(val, index) in item.label" :key="index">{{val}}</span> -->
                  </div>
                </div>
              </div>
              <div class="btom">
                <div class="company-transtion">
                  <i class="jiazheng icon-biaodiandidian"></i>
                  <span>{{item.distance}}</span>
                </div>
                <p>{{item.com_address}}</p>
              </div>
            </div>
            <!-- more -->
            <div class="more-company">
              <span @click="$router.push('/homehelp')">更多公司</span>
              <i class="
                  jiazheng
                  icon-weibiaoti34"></i>
            </div>
          </div>
        </div>

      </div>
      <div class="reg">
        <div class="reg-head">
          <i class="jiazheng icon-shouye fuck" />
          <span>诚信注册家服员</span>
        </div>
        <div v-for="(item, index) in servicers"
             :key="index">
          <serve-item :servicers='item' />
        </div>
        <!-- more -->
        <div class="more-reg">
          <span @click="$router.push('/service')">更多家服务员</span>
          <i class="jiazheng icon-weibiaoti34"></i>
        </div>
      </div>
      <div class="footer">
        <p>--------------我是有底线的--------------</p>
      </div>
    </div>
  </div>
</template>

<script>
import { swipe, homepageCompany, serviceStyle, servicer } from '@/api/homepage'
import serveItem from './components/serve-item'
export default {
  name: 'homePage',
  data () {
    return {
      // islife: '',
      img: [],
      company: [],
      serviceStyle: [],
      servicers: [],
      value: ''
    }
  },
  components: {
    serveItem
  },
  created () {
    this.loadIMG()
    this.loadCompany()
    this.loadService()
    this.loadServicer()
  },
  methods: {
    async loadIMG () {
      try {
        const { data: res } = await swipe()
        // console.log(res)
        this.img = res
      } catch (err) {
        this.$toast('请求失败')
      }
    },
    async loadCompany () {
      try {
        const { data: res } = await homepageCompany()
        this.company = res
      } catch (err) {
        this.$toast('请求失败')
      }
    },
    async loadService () {
      try {
        const { data: res } = await serviceStyle()
        console.log(res)
        this.serviceStyle = res
      } catch (err) {
        this.$toast('请求失败')
      }
    },
    async loadServicer () {
      try {
        const { data: res } = await servicer()
        console.log(res)
        this.servicers = res
      } catch (err) {
        this.$toast('请求失败')
      }
    }
  }
}
</script>
<style lang="less" scoped>
.homepage-container {
  background-color: #f6f6f6;
  .l {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 5;
    display: flex;
    justify-content: space-between;
    color: #fff;
    background-color: #1196db;
    .van-search {
      flex: 1;
      height: 88px;
      background-color: transparent;
    }
    .h-l {
      width: 80px;
      height: 88px;
      background: url('../../assets/sanheng.png') no-repeat center / 40px;
    }
    span {
      width: 80px;
      height: 88px;
      line-height: 88px;
      font-size: 28px;
    }
  }
  .t {
    padding: 10px 16px 40px;
    background-color: #1196db;
    // swiper
    /deep/.pageSwipe {
      margin-top: 88px;
      // margin-top: 144px;
      // margin-left: 12px;
      // width: 684px;
      width: 100%;
      height: 282px;
      // background-color: pink;
      .swipe-item {
        border-radius: 30px;
        overflow: hidden;
        .swiperImg {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .h {
    // background-color: #fff;
    margin: 0 16px 50px;
    border-radius: 30px;
    .islife {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      cursor: pointer;
      span {
        margin-top: 30px;
        height: 120px;
        width: 212px;
        background: linear-gradient(to left, #92fe9d, #1196db);
        border-radius: 20px;
        color: #ffffff;
        // color: #333;
        font-size: 24px;
        text-align: center;
        line-height: 120px;
        font-family: '黑体';
      }
    }
    // find-need
    .find-need {
      padding: 0 16px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-bottom: 20px;
      .find-need-item:nth-child(4n) {
        margin-right: 0;
      }
      .find-need-item {
        display: flex;
        // width:  1/3;
        box-sizing: border-box;
        margin-right: 41px;
        color: rgba(16, 16, 16, 100);
        font-size: 28px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-family: PingFangSC-regular;
        .round {
          margin: 24px 0 18px;
          width: 110px;
          height: 110px;
          background-color: #eeecec;
          border-radius: 50%;
          line-height: 110px;
          text-align: center;
        }
      }
    }
  }
  .pp {
    //iscompany
    margin: 20px 16px;
    border-radius: 30px;
    background-color: #fff;
    .iscompany {
      .iscompany-head {
        height: 90px;
        line-height: 90px;
        // background-color: pink;
        display: flex;
        font-size: 28px;
        .fuck {
          padding-right: 20px;
          color: rgba(151, 145, 145, 100);
          font-size: 36px;
        }
      }
      .iscompany-main {
        .iscompany-main-item {
          // display: flex;
          border-top: 4px solid #f0eeee;
          padding: 24px 0;
          .x {
            display: flex;
            .iscompany-main-item-l {
              margin-right: 20px;
              width: 160px;
              height: 172px;
              background-color: #fff;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .iscompany-main-item-r {
              // box-sizing: border-box;
              flex: 1;
              h3 {
                margin-top: 0;
                color: rgba(0, 0, 0, 1);
                font-size: 28px;
                font-family: PingFangSC-regular;
              }
              p {
                color: rgba(151, 145, 145, 100);
                font-size: 24px;
                font-family: PingFangSC-regular;
              }
              .label {
                height: 46px;
                // width: 100%;
                line-height: 46px;
                // background-color: pink;
                font-size: 20px;
                color: #eda875;
                .van-tag {
                  margin-right: 10px;
                  display: inline-block;
                  border-radius: 46px;
                  padding: 5px;
                }
              }
            }
          }
          .btom {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            margin-top: 20px;
            height: 34px;
            line-height: 34px;
            color: #979191;
            .company-transtion {
              display: flex;
              width: 160px;
              margin-right: 20px;
              i {
                padding-right: 14px;
                color: #979191;
                font-size: 36px;
              }
            }
            p {
              flex: 1;
            }
          }
        }
        // more
        .more-company {
          height: 80px;
          line-height: 80px;
          // margin-top: 60px;
          text-align: center;
          font-size: 24px;
          color: #7b7777;
          // F9F5F5
        }
      }
    }
  }
  // reg
  .reg {
    background-color: #fff;
    border-radius: 30px;
    margin: 0 16px;
    margin-bottom: 180px;
    .reg-head {
      height: 90px;
      line-height: 90px;
      // background-color: pink;
      display: flex;
      font-size: 28px;
      .fuck {
        padding-right: 20px;
        color: rgba(151, 145, 145, 100);
        font-size: 36px;
      }
    }
    .more-reg {
      height: 80px;
      line-height: 80px;
      margin-bottom: 40px;
      text-align: center;
      font-size: 24px;
      color: #7b7777;
      // F9F5F5
    }
  }
  .footer {
    position: absolute;
    height: 90px;
    bottom: -1600px;
    z-index: 6;
    left: 50%;
    margin-left: -198px;
    font-size: 23px;
    color: #cacaca;
  }
  /deep/ .icon-lingdangcopy {
    font-size: 40px;
  }
}
</style>
